<style lang="less" scoped>
@import "../assets/css/config.less";
.layout {
  border: 1px solid #F0F0F1;
  background: @header-bgc;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  /* box-shadow: 0 2px 4px 2px #F0F0F1, 0 0px 4px 2px #F0F0F1; */
  overflow: visible;
}
.layout-logo {
  width: 160px;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 3px;
  float: left;
  position: relative;
  margin-right: 30px;
}
.layout-logo img {
  width: 100%;
}
.layout-nav {
  display: flex;
  flex-direction: row-reverse;
  width: 400px;
  margin: 0 auto;
  margin-right: 25px;
}
.el-dropdown-link{
  height: 56px;
}

.flex-space-between{
  display: flex;
  justify-content: space-between;
}
.flex-row{
  display: flex;
  justify-content: start;
  align-items: center;
}
.active{
  color: @color1!important;
  /* font-weight: 500; */
  /* text-shadow: 0 0.5px 1px @color1; */
}
.user-pic{
  font-size: 17px;
}
.username{
  display: inline-block;
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-pic img{
  width: 20px;
  height: 20px;
  margin-right: 5px;
  /* border: 1px solid  #d7dde4; */
}
.el-menu-item{
  font-size: 17px;
  padding: 0 15px;
  margin-right: 5px;
  font-family: "冬青黑体", "方正工业黑";
  /* font-family: 微软雅-apple-system,BlinkMacSystemFont,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif黑; */
  /* text-shadow: 0px 0.5px 1px #303133; */
}
.dropdown-menu{
  display: none;
  border: 1px solid #EBEEF5;
  background-color: #fff;
  position: absolute;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  padding: 8px 0;
  overflow: visible;
  &:hover{
    display: block;
  }
  .angle{
    width: 10px;
    height: 10px;
    background-color: #fff;
    box-shadow: -2px -2px 4px 0px rgba(112, 111, 111, 0.1);
    border: 1px solid #EBEEF5;
    border-right: none;
    border-bottom: none;
    position: absolute;
    top: -6px;
    left: 15px;
    transform: rotateZ(45deg);
  }
  .menu-item{
    position: relative;
    margin-right: -1px;
    margin-left: -1px;
    padding: 6px 15px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    &:hover{
      background-color: @hover-bgc;
      color: @color2;
    }
  }
  .devider{
    margin-top: 10px;
  }
  .devider::before{
    position: absolute;
    left: 0;
    top: -5px;
    content: '';
    width: 100%;
    border-top: 1px solid rgb(240, 237, 237);
  }
}
.dropmenu:hover+.dropdown-menu{
  display: block
}

img{
  width: 18px;
  width: 18px;
  transform: translateY(-1px);
  /* margin-right: 3px; */
}
</style>
<style lang="less">
@import "../assets/css/config.less";

</style>
<template>
  <div class="layout">
      
      <div class="flex-space-between">
        <div class="flex-row" style="margin-left: 10px">
          <div name="0" class="layout-logo" @click="first">
            <img src="@/assets/logo.png" alt="">
          </div>
          <div name="0" class="el-menu-item" :class="active==='0'?'active':''" @click="first">
            <img v-if="active==='0'" src="@/assets/首页2.png">
            <img v-if="active!=='0'" src="@/assets/首页.png">
            首页
            <!-- <div class="active"></div> -->
          </div>
          <div name="1">
            <div name="1" class="el-menu-item dropmenu" :class="active==='1'?'active':''">
              <img v-if="active==='1'" src="@/assets/课程2.png">
              <img v-if="active!=='1'" src="@/assets/课程.png">
              课程
            </div>
            <div class="dropdown-menu">
              <div class="angle"></div>
              <div class="menu-item" @click="handleCommand('toYDHLW')">移动互联网</div>
              <div class="menu-item" @click="handleCommand('toJS')">JavaScript</div>
              <div class="menu-item" @click="handleCommand('toWX')">微信小程序</div>
            </div>
          </div>
          <div name="5" class="el-menu-item" :class="active==='5'?'active':''" @click="toDemo">
            <img v-if="active==='5'" src="@/assets/案例1.png">
            <img v-if="active!=='5'" src="@/assets/案例.png">
            案例
            <!-- <div class="active"></div> -->
          </div>
          <div name="6" class="el-menu-item" :class="active==='6'?'active':''" @click="toProject">
            <img v-if="active==='6'" src="@/assets/案例1.png">
            <img v-if="active!=='6'" src="@/assets/案例.png">
            项目
            <!-- <div class="active"></div> -->
          </div>
          <div>
            <div
              v-if="userGroup === '1' || userGroup === '2' ||userGroup === '3'"
              @click="toMyQuestions"
               :class="active==='3'?'active':''"
              class="el-menu-item"
              >
              <img v-if="active==='3'" src="@/assets/题库2.png">
              <img v-if="active!=='3'" src="@/assets/题库.png">
              题库
            </div>
          </div>
        </div>
        
        <div class="layout-nav">

          <div>
            <div name="4" class="el-menu-item user-pic dropmenu" :class="active==='4'?'active':''">
              <img v-if="active==='4'" src="@/assets/个人中心2.png">
              <img v-if="active!=='4'" src="@/assets/个人中心.png">
              <span class="username">{{ user.username  }}</span>
            </div>
            <div class="dropdown-menu">
              <div class="angle"></div>
              <div class="menu-item" @click="handleCommand('collection')">我的收藏</div>
              <div class="menu-item" @click="handleCommand('error')">我的错题</div>
              <div class="menu-item" @click="handleCommand('personal')">个人中心</div>
              <div class="menu-item devider" @click="handleCommand('logout')">注销</div>
            </div>
          </div>
          
          <div @click="toMessage" :class="active==='2'?'active':''" class="el-menu-item">
            <Badge :count="$store.getters.messageUnreadCount" :offset="[20,-10]">
              <img style="height:24px;width:24px" v-if="active==='2'" src="@/assets/消息中心2.png">
              <img style="height:24px;width:24px" v-if="active!=='2'" src="@/assets/消息中心.png">
              消息
            </Badge>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { getUnreadNumber } from "../api/api";
export default {
  name: "myheader",
  data() {
    return {
      userGroup: "",
      unread: 0,
    };
  },
  mounted() {
    this.userGroup = this.user.userGroup;
  },
  computed: {
    ...mapState({
      'user': state => JSON.parse(state.user)
    }),
    active(){
      switch(this.$route.path) {
        case '/':
        case '/check':
        case '/appoint':
        case '/feedback':
        case '/analyse':
        case '/path':
        case '/homework':  
          return '0';
        case '/message':
          return  '2';
        case '/runnob':
        case '/demoPractise':
          return  '5';
        case '/projects':
          return '6'
        // case this.$route.path.match(/^\/question\/.+/)[0]:
        //   return  '3';
        case '/collection':
        case '/error':
        case '/person':
        case '/change_pass':
        case '/bindEmail':
          return  '4';
        default:
          if(/^\/question\/.+/.test(this.$route.path)){
            return '3'
          }
          if(/^\/project\/.+/.test(this.$route.path)){
            return '6'
          }
        // if(/^#\/(\w+_)?\w+,\d+,\d+$/.test(window.location.hash)){
          return  '1';
        // }
      }
    }
  },
  methods: {
    toMessage() {
      if (this.$route.name === "message") {
        return;
      }
      this.$router.push({
        name: "message"
      });
    },
    toMyQuestions() {
      if (this.$route.name === "question") {
        return;
      }
      this.$router.push({
        name: "question",
        params: {
          menu: "wx,0,0"
        }
      });
    },
    toError() {
      if (this.$route.name === "error") {
        return;
      }
      this.$router.push({
        name: "error"
      });
    },
    toCollection() {
      if (this.$route.name === "collection") {
        return;
      }
      this.$router.push({
        name: "collection"
      });
    },
    handleCommand(command) {
      if (command === "personal") {
        this.personal();
      } else if (command === "logout") {
        this.logout();
      } else if (command === "collection") {
        this.toCollection();
      } else if (command === "error") {
        this.toError();
      } else if (command === "apply") {
        if (this.$route.name === "apply") {
          return;
        }
        this.$router.push({
          name: "apply"
        });
      } else if (command === "check") {
        if (this.$route.name === "check") {
          return;
        }
        this.$router.push({
          name: "check"
        });
      } else if (command === "appoint") {
        if (this.$route.name === "appoint") {
          return;
        }
        this.$router.push({
          name: "appoint"
        });
      } else if (command === "analyse") {
        if (this.$route.name === "analyse") {
          return;
        }
        this.$router.push({
          name: "analyse"
        });
      } else if (command === "path") {
        if (this.$route.name === "path") {
          return;
        }
        this.$router.push({
          name: "path"
        });
      } else if (command === "feedback") {
        if (this.$route.name === "feedback") {
          return;
        }
        this.$router.push({
          name: "feedback"
        });
      } else if (command === "toYDHLW") {
        if (
          this.$route.name === "index" &&
          this.$route.params.menu === "ydhlw,0,0"
        ) {
          return;
        }
        this.$router.push({
          name: "index",
          params: {
            menu: "ydhlw,0,0"
          }
        });
        this.$emit("ydhlw");
      } else if (command === "toJS") {
        if (
          this.$route.name === "index" &&
          this.$route.params.menu === "js,0,0"
        ) {
          return;
        }
        this.$router.push({
          name: "index",
          params: {
            menu: "js,0,0"
          }
        });
        this.$emit("js");
      } else if (command === "toWX") {
        if (
          this.$route.name === "index" &&
          this.$route.params.menu === "wx,0,0"
        ) {
          return;
        }
        this.$router.push({
          name: "index",
          params: {
            menu: "wx,0,0"
          }
        });
        this.$emit("wx");
      }else if(command === "toWxNew") {
        if (
          this.$route.name === "index" &&
          this.$route.params.menu === "wx_new,0,0"
        ) {
          return;
        }
        this.$router.push({
          name: "index",
          params: {
            menu: "wx_new,0,0"
          }
        });
        this.$emit("wx_new");
      }
    },
    personal() {
      if (this.$route.name === "person") {
        return;
      }
      this.$router.push({
        name: "person"
      });
    },
    logout() {
      if (this.$route.name === "login") {
        return;
      }
      this.$store.commit("del_token");
      this.$router.push({
        name: "login"
      });
    },
    first() {
      if (this.$route.name === "index" && this.$route.params.menu === undefined) {
        return;
      }
      this.$router.push({
        name: "index"
      });
    },
    toDemo() {
      if (this.$route.name === "demoPractise") {
        return;
      }
      this.$router.push({
        name: "demoPractise"
      });
    },
    toProject() {
      if (this.$route.name === "projects") {
        return;
      }
      this.$router.push({
        name: "projects"
      });
    },
    toZY() {
      if (this.$route.name === "homework") {
        return;
      }
      this.$router.push({
        name: "homework"
      });
    },
    // toYDHLW() {
    //   if (
    //     this.$route.name === "index" &&
    //     this.$route.params.menu === "ydhlw,0,0"
    //   ) {
    //     return;
    //   }
    //   this.$router.push({
    //     name: "index",
    //     params: {
    //       menu: "ydhlw,0,0"
    //     }
    //   });
    //   this.$emit("ydhlw");
    // },
    // toJS() {
    //   if (
    //     this.$route.name === "index" &&
    //     this.$route.params.menu === "js,0,0"
    //   ) {
    //     return;
    //   }
    //   this.$router.push({
    //     name: "index",
    //     params: {
    //       menu: "js,0,0"
    //     }
    //   });
    //   this.$emit("js");
    // },
    // toWX() {
    //   if (
    //     this.$route.name === "index" &&
    //     this.$route.params.menu === "wx,0,0"
    //   ) {
    //     return;
    //   }
    //   this.$router.push({
    //     name: "index",
    //     params: {
    //       menu: "wx,0,0"
    //     }
    //   });
    //   this.$emit("wx");
    // }
  }
};
</script>
